<template>
  <div>
    <div style="background-color: rgb(254, 216, 2)">
      <div class="nav1">
        <div class="logo">
          <!-- <span class="navLogo">闲呗</span> -->
          <img style="width:80px;height:65px" src="http://112.74.185.144:8000/files/k1R1667179069.jpg" alt="">
          <span class="navText">让你的闲置游起来</span>
        </div>
        <div class="log">
          <div><img src="../assets/扬声器.png" class="navImg" /></div>
          <div class="navText1">请下载手机版闲鱼,买卖闲置更便捷</div>
        </div>
      </div>
    </div>
    <div class="background">
      <div
        style="position: absolute; left: 67%; top: 31%; background-color: white;height:300px"
      >
        <van-tabs v-model="activeName">
          <van-tab title="账号登录" name="a">
            <div style="width: 80%; margin: 0 auto">
              <van-cell-group style="margin-top: 15px">
                <van-field
                  v-model="acc"
                  id="acc"
                  required
                  label="手机号"
                  maxlength="11"
                  placeholder="请输入手机号"
                  autocomplete="off"
                  v-on:blur="useracc"
                  :error-message="telErr"
                />
                <van-field
                  v-model="pwd"
                  id="pwd"
                  type="password"
                  required
                  label="密码"
                  placeholder="请输入密码"
                  v-on:blur="userpwd"
                  :error-message="pwdErr"
                />
                <p id="regis"><a @click="goRegister">没有账号，前往注册</a></p>
                <van-button
                style="margin-bottom:30px"
                  type="primary"
                  size="large"
                  @click="login"
                  id="loginBtn"
                  >登录</van-button
                >
              </van-cell-group>
            </div>
            <!-- <div style="width: 80%; margin: 0 auto">
              <el-button type="primary" @click="payOrder" id="QRloginBtn"
                >生成二维码</el-button
              >
              <el-dialog
                width="30%"
                :title="payment"
                center
                @close="closeCode"
                :visible.sync="innerVisible"
                append-to-body
              >
                <div class="paycode">
                  放置二维码的容器,需要给一个ref
                  <div id="qrcode" ref="qrcode"></div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                  >
                </span>
              </el-dialog>
            </div> -->
          </van-tab>
          <van-tab title="验证码登录" name="b">
            <div style="width: 80%; margin: 0 auto">
              <van-cell-group style="margin-top: 15px">
                <van-field
                  v-model="acc"
                  id="acc"
                  required
                  label="手机号"
                  maxlength="11"
                  placeholder="请输入手机号"
                  autocomplete="off"
                  v-on:blur="useracc"
                  :error-message="telErr"
                />
                <van-field
                  v-model="sms"
                  center
                  clearable
                  label="短信验证码"
                  placeholder="请输入验证码"
                  id="code"
                >
                  <template #button>
                    <van-button
                      size="small"
                      type="primary"
                      :disabled="disabled"
                      @click="sendcode"
                      >{{ codeBtn }}
                    </van-button>
                  </template>
                </van-field>
                <p id="regis"><a @click="goRegister">没有账号，前往注册</a></p>
                <van-button
                  type="primary"
                  size="large"
                  @click="codelogin"
                  id="loginBtn1"
                  >验证码登录</van-button
                >
              </van-cell-group>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
  
<script>
import QRCode from "qrcodejs2";
import { Toast } from 'vant';
export default {
  data() {
    return {
      acc: "", // userTel账号
      pwd: "", // 密码
      telErr: "", // 账号失焦
      pwdErr: "", // 密码失焦
      dialogVisible: false, // 对话框显示状态
      payment: "二维码登录", // 二维码登录标题内容
      innerVisible: false,
      activeName: 'a',
      codeBtn: '发送验证码', // 发送验证码按钮的文字内容
      disabled: false,
      sms: '', //验证码
      code: '',// 后台获取的验证码
    }
  },
  methods: {

    useracc() {
      if (this.acc == "") {
        this.telErr = "输入账号为空";
      } else {
        this.telErr = "";
      }
    },
    userpwd() {
      if (this.pwd == "") {
        this.pwdErr = "输入密码为空";
      } else {
        this.pwdErr = "";
      }
    },
    // QRloginBtn() {
    //   this.$axios
    //     .post("api/userTable/QRLogin", {
    //       params: {},
    //     })
    //     .then((resp) => {
    //       console.log(resp.data, 56);
    //     })
    //     .catch((err) => {
    //       console.log(err, 58);
    //     });
    // },
    login() {
      console.log(this.acc, this.pwd, 114)
      if (this.acc == '' || this.pwd == '') {
        // alert('输入的账号和密码为空')
        Toast('输入的账号和密码为空');
      } else {
        this.$axios
          .get("api/userTable/login", {
            params: {
              acc: this.acc,
              pwd: this.pwd,
            },
          })
          .then((resp) => {
            console.log(resp.data, 56);
            if (resp.data.code == 200) {
              // alert("登录成功");
              Toast('登录成功');
              let userTel = resp.data.data[0].userTel;
                this.$socket.emit("login", {
                  loginer: userTel,
                  kefu: 0, //不是客服
                });
              sessionStorage.setItem("userTel", userTel);
              this.$router.push("/");
            } else {
              // alert(resp.data.msg);
              Toast(resp.data.msg);
            }
          })
          .catch((err) => {
            console.log(err, 58);
          });
      }
    },
    goRegister() {
      this.$router.push({ name: "Register" });
    },
    codelogin() {
      console.log(this.acc, this.sms);
      if (this.acc == "" || this.sms == "") {
        // alert("输入的账号和验证码为空");
        Toast("输入的账号和验证码为空");
      } else {
        this.$axios
          .get("api/userTable/getuser", {
            params: {
              acc: this.acc,
            },
          })
          .then((resp) => {
            console.log(resp.data, 56);
            if (resp.data.code == 200) {
              // alert("登录成功");
              Toast("登录成功");
              let userTel = resp.data.data[0].userTel;

              sessionStorage.setItem("userTel", userTel);
              if (sessionStorage.getItem("userTel")) {
                this.$socket.emit("login", {
                  loginer: sessionStorage.getItem("userTel"),
                  kefu: 0, //不是客服
                });
              }
              this.$router.push({ name: "Homepage" });
            } else {
              // alert(resp.data.msg);
              Toast(resp.data.msg);
            }
          })
          .catch((err) => {
            console.log(err, 58);
          });
      }
    },
    payOrder() {
      this.innerVisible = true;
      // 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
      this.qrcode = "https://vant-contrib.gitee.io/vant/v2/#/zh-CN/";
      // 使用$nextTick确保数据渲染
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    // 生成二维码
    crateQrcode() {
      this.qr = new QRCode("qrcode", {
        width: 150,
        height: 150, // 高度
        text: this.qrcode, // 二维码内容
      });
      // console.log(this.qrcode)
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.$refs.qrcode.innerHTML = "";
    },
    sendcode() {
      var acc = this.acc;
      if (acc == "") {
        // alert("手机号码不能为空");
        Toast("手机号码不能为空");
      } else {
        this.$axios.get('api/userTable/getyzm', {
          params: {
            phone: this.acc
          }
        })
          .then(resp => {
            console.log(resp, 170)
            this.code = resp.data.data
            if (resp.data.code == 200) {
              // alert('验证码已发送.请注意接收')
              Toast("验证码已发送.请注意接收");
              this.disabled = true
            }

          }).catch(err => {
            console.log(err, 172)
          })
         
      }
    },
  },
  mounted() {

  },
  created(){
    document.title='登录'
  }

}
</script>
  
<style scoped>
.nav1 {
  height: 60px;
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(254, 216, 2);
  box-shadow: 0px 0px 0px #2999;
}

.navLogo {
  font-size: 40px;
}

.logo {
  margin-left: 100px;
  float: left;
  color: black;
}

.navText {
  position: relative;
  font-size: 14px;
  margin-left: 30px;
  /* line-height: 65px; */
  top:-30px;
}

.background {
  height: 92vh;
  background-image: url("../assets/TB1FywYtUT1gK0jSZFrXXcNCXXa-970-763.png");
  background-repeat: no-repeat;
  background-size: 70% 100%;
  background-color: rgb(255, 233, 36);
}

.log {
  display: flex;
  align-items: center;
  margin-right: 120px;
}

.navImg {
  width: 20px;
  height: 20px;
}

#pwd {
  margin-top: 15px;
}

#code {
  margin-top: 15px;
}

#regis {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-right: 20px;
  font-size: 12px;
  text-align: right;
}
#regis a {
  cursor: pointer;
}

#QRloginBtn {
  width: 85%;
  height: 36px;
  margin: 0 auto;
  display: flex;
  border-radius: 7px;
  margin-top: 20px;
  margin-bottom: 30px;
  justify-content: center;
}

#loginBtn {
  margin-bottom: 30px;
  width: 85%;
  height: 36px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  border-radius: 7px;
}

#loginBtn1 {
  width: 85%;
  height: 36px;
  margin: 0 auto;
  display: flex;
  border-radius: 7px;
  margin-bottom: 20px;
  justify-content: center;
}

.qrcode {
  width: 200px;
  height: 200px;
  border: 1px solid #e2e2e2;
  display: flex;
  justify-content: center;
}

.navText1 {
  margin-left: 10px;
}
</style>> 

